import React from 'react';
import { connect } from 'dva';
import { Tabs, Icon, Card, Form, Input, Button, Spin, message, Alert } from 'antd';
import PropTypes from 'prop-types';
import { Link } from 'dva/router';
import { routerRedux } from 'dva/router';


const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
class User extends React.Component {
    constructor(props) {
        super(props);
    };
    initState = {};
    componentDidMount() {
        this.initState = window.__INITIAL_STATE__;
        if (this.initState.islogin) {
            this.props.dispatch({ type: 'user/go', payload: { url: '/my' } });
        }
        this.refs.logoImage.src = this.initState.staticServer + "/images/logo.png";
    };

    state = {
        signin: '',
        signup: 'none',
        confirmDirty: false,
        autoCompleteResult: []
    };
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };
    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码不一致');
        } else {
            callback();
        }
    };
    checkConfirm = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    };

    loginHandler = (e) => {
        e.preventDefault();
        var fields = this.props.form.validateFieldsAndScroll;
        fields((errors, values) => {
            if (errors) {
                return;
            }
            const data = {
                PhoneNum: values.lphonenum,
                Passport: values.lpassword
            }
            this.props.dispatch({ type: 'user/login', payload: data });

        });

    };


    render() {
        const { getFieldDecorator } = this.props.form;
        const { loading, formhelp, formstate } = this.props.user;
        return (
            <div className='userbox'>
                    <div className='signinbox'>
                        <img ref="logoImage" className='logoimage' />
                        <h2 className='yuanwen-tip'>每一个客户，都是我们的财富</h2>
                        <Alert style={formhelp == '' ? { display: 'none', marginBottom: '13px' } : { display: '', marginBottom: '13px' }}
                            message={formhelp} type={formstate} showIcon />
                        <Spin className='yw-spin' tip='请求中...' spinning={loading} delay={100}>
                            <Form layout={'vertical'} style={{ display: this.state.signin }} onSubmit={this.loginHandler}>
                                <FormItem
                                    label="登录名"
                                >
                                    {getFieldDecorator('lphonenum', {
                                        rules: [{ required: true, message: '请输入你的登录名!', whitespace: true }]
                                    })(
                                        <Input placeholder="请输入你的登录名!" />
                                        )}
                                </FormItem>
                                <FormItem
                                    label="密码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('lpassword', {
                                        rules: [{
                                            required: true, message: '请输入你的密码！',
                                        }, {
                                            validator: this.checkConfirm,
                                        }],
                                    })(
                                        <Input type="password" placeholder="请输入你的密码!" />
                                        )}
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" htmlType="submit" style={{ width: '100%' }}>登陆</Button>
                                </FormItem>
                            </Form>
                        </Spin>
                    </div>
           
                <div className='yw-footer'>
                    <span><Link to='/' >佰平大厅</Link></span>
                    <span className="dot">·</span>
                    <span><Link to='/tag'>佰平标签</Link></span>
                    <span className="dot">·</span>
                    <span><Link to='/about'>联系我们</Link></span>
                    <br />
                    <span>© 2017 佰平 </span><span className="dot">·</span><span>赠人玫瑰，手有余香</span>
                    <span className="dot">·</span><span>最好的学习方法，就是授人以渔</span>
                </div>
                <div className='wrapper'>
                    <ul className='bg-bubbles'>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>



        )
    }
}

User.propTypes = {
    state: PropTypes.object,
    form: PropTypes.object,
    user: PropTypes.object,
    dispatch: PropTypes.func
}
const WrappedRegistrationForm = Form.create()(User);


export default connect(({ dispatch, user }) => ({ dispatch, user }))(WrappedRegistrationForm);